<template>
    <view>
        <block v-if="isAdmin && isLoad">
            <cmpt-comm-list
                id="cmpt-comm-list"
                source="admin"
                type="admin-meet"
                :search="search || ''"
                :_menus="sortMenus"
                :_items="sortItems"
                route="user/page"
                sortMenusDefaultIndex="0"
                topBottom="50"
                placeholder="搜索"
                @list="bindCommListCmpt($event, { tagId: 'cmpt-comm-list' })"
            >
                <view slot="searchEnd">
                    <button @tap="url" :data-url="'../export/admin_user_export?condition=' + dataList.condition" class="btn mid radius bg-admin text-white margin-right-s">
                        <text class="icon-down margin-right-xxs"></text>
                        导出用户资料
                    </button>
                </view>

                <!-- List Begin -->
                <view class="admin-comm-list">
                    <view v-if="dataList && dataList.total" class="load text-grey">共有{{ dataList.total }}条符合条件记录</view>

                    <view class="item" v-for="(item, index) in dataList.list" :key="index">
                        <view class="no">{{ index + 1 }}</view>

                        <view class="header">
                            <view class="left text-cut">{{ item.username }}</view>
                            <view class="right">
                                <text v-if="item.userStatus == 1" class="text-black">「正常」</text>
                                <text v-else-if="item.userStatus == 0" class="text-orange">「待审核」</text>
                                <text v-else-if="item.userStatus == 2" class="text-red">「审核未过」</text>
                                <text v-else-if="item.userStatus == 3" class="text-purple">「禁用」</text>
                            </view>
                        </view>

                        <view class="info">
                            <view v-if="item.userStatus == 2" class="info-item">
                                <view class="title">审核理由</view>
                                <view class="mao">：</view>
                                <view class="content">{{ item.approvalReason || '未填写' }}</view>
                            </view>
                            <view class="info-item" @tap="url" data-type="phone" :data-url="item.phone">
                                <view class="title">手机</view>
                                <view class="mao">：</view>
                                <view class="content">
                                    {{ item.phone || '未填写' }}
                                    <text v-if="item.phone" class="icon-phone margin-left-s"></text>
                                </view>
                            </view>

                            <view class="info-item">
                                <view class="title">注册</view>
                                <view class="mao">：</view>
                                <view class="content">{{ item.createdTime }}</view>
                            </view>

                            <view class="info-item" @tap="url" :data-url="'../detail/admin_user_detail?id=' + item.id">
                                <view class="title">详情</view>
                                <view class="mao">：</view>
                                <view class="content text-blue">查看更多用户资料...</view>
                            </view>

                            <view class="oprt">
                                <block v-if="userRegCheck">
                                    <view v-if="item.userStatus == 0" @tap="bindStatusTap" data-status="1" :data-idx="index" class="btn margin-right-s text-green">审核通过</view>

                                    <view v-if="item.userStatus == 0" @tap="bindCheckTap" data-status="2" :data-idx="index" class="btn margin-right-s text-red">审核不过</view>
                                </block>

                                <view v-if="item.userStatus == 3" @tap="bindStatusTap" data-status="1" :data-idx="index" class="btn margin-right-s">
                                    <text class="icon-check margin-right-xxs text-green"></text>
                                    恢复正常
                                </view>

                                <view v-if="item.userStatus != 3" @tap="bindStatusTap" data-status="3" :data-idx="index" class="btn margin-right-s">
                                    <text class="icon-close margin-right-xxs text-purple"></text>
                                    禁用
                                </view>

                                <view @tap="bindDelTap" :data-id="item.id" class="btn margin-right-s">
                                    <text class="icon-delete margin-right-xxs text-orange"></text>
                                    删除
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- List END -->

                <!-- load begin -->

                <!-- parse <template is="listLoadTpl" :data="skin:'text-grey',dataList"/> -->
                <block name="listLoadTpl" v-if="false">
                    <view v-if="!dataList || (dataList && dataList.page < dataList.count)" :class="'load text-grey loading ' + 'text-grey'"></view>
                    <view v-if="dataList && dataList.page > 1 && dataList.page == dataList.count" :class="'load text-grey over ' + 'text-grey'"></view>

                    <block v-if="noHintImg">
                        <image style="height: 500rpx" mode="aspectFit" v-if="dataList && dataList.total == 0" :src="noHintImg" />
                    </block>

                    <block v-else>
                        <view v-if="dataList && dataList.total == 0" :class="'load text-grey ' + 'text-grey'">{{ '暂无记录' ? '暂无记录' : '暂无记录哦~' }}</view>
                    </block>

                    <view style="height: 200rpx"></view>
                </block>
                <!-- load end -->
            </cmpt-comm-list>

            <cmpt-modal
                v-if="checkModalShow"
                :show.sync="checkModalShow"
                type="dialog"
                title="审核不过"
                @click="bindCheckCmpt"
                class="modal-form"
                cancelText="返回"
                confirmText="确定"
            >
                <view class="form-group" style="padding: 0 10rpx">
                    <view class="title">
                        审核不过理由
                        <text class="text-grey text-mid">(选填)</text>
                        ：
                    </view>
                    <view @tap="bindClearReasonTap" style="width: 150rpx; text-align: right" class="text-grey">
                        <text class="icon-roundclose"></text>
                        清空
                    </view>
                </view>

                <view class="form-group cancel-area">
                    <textarea placeholder-class="phc" placeholder="请输入审核不过理由 (非必填)" style="height: 110rpx" v-model="formReason" maxlength="100"></textarea>
                </view>
            </cmpt-modal>
        </block>
    </view>
</template>

<script>
import AdminBiz from '@/utils/comm/biz/admin_biz.js';
import pageHelper from '@/utils/helper/page_helper.js';
import cacheHelper from '@/utils/helper/cache_helper.js';
import cloudHelper from '@/utils/helper/cloud_helper.js';
import projectSetting from '@/utils/public/project_setting.js';
const CACHE_USER_CHECK_REASON = 'CACHE_USER_CHECK_REASON';
const api = require('@/api/adminapi.js');

export default {
    data() {
        return {
            userRegCheck: projectSetting.USER_REG_CHECK,
            checkModalShow: false,
            formReason: '',
            curIdx: -1,

            dataList: {
                condition: '',
                total: '',
                list: [],
                page: 0,
                count: 0
            },

            data1Name: '',
            data2Name: '',
            search: '',
            sortItems: '',
            sortMenus: '',
            isLoad: false,
            isAdmin: '',
            noHintImg: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: async function (options) {
        if (!AdminBiz.isAdmin(this)) {
            return;
        }

        //设置搜索菜单
        await this.getSearchMenuFun();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: async function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    methods: {
        url: async function (e) {
            pageHelper.url(e, this);
        },

        bindCommListCmpt: function (e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            pageHelper.commListListener(this, e);
        },

        bindDelTap: async function (e) {
            if (!AdminBiz.isAdmin(this)) {
                return;
            }
            let id = pageHelper.dataset(e, 'id');
            let params = {
                id
            };
            let callback = async () => {
                try {
                    let opts = {
                        title: '删除中'
                    };
                    api.deleteUser(params, opts).then((res) => {
                        pageHelper.delListNode(id, this.dataList.list, 'id');
                        this.dataList.total--;
                        this.setData({
                            dataList: this.dataList
                        });
                    });
                    // await cloudHelper.callCloudSumbit('admin/user_del', params, opts).then((res) => {
                    //     pageHelper.delListNode(id, this.dataList.list, 'USER_MINI_OPENID');
                    //     this.dataList.total--;
                    //     this.setData({
                    //         dataList: this.dataList
                    //     });
                    //     pageHelper.showSuccToast('删除成功');
                    // });
                } catch (e) {
                    console.log('CatchClause', e);
                    console.log('CatchClause', e);
                    console.log(e);
                }
            };
            pageHelper.showConfirm('确认删除？删除不可恢复', callback);
        },

        bindClearReasonTap: function (e) {
            this.setData({
                formReason: ''
            });
        },

        bindCheckTap: function (e) {
            let curIdx = pageHelper.dataset(e, 'idx');
            this.setData({
                formReason: cacheHelper.get(CACHE_USER_CHECK_REASON) || '',
                curIdx,
                checkModalShow: true
            });
        },

        bindCheckCmpt: async function () {
            let e = {
                currentTarget: {
                    dataset: {
                        status: 2,
                        idx: this.curIdx
                    }
                }
            };
            cacheHelper.set(CACHE_USER_CHECK_REASON, this.formReason, 31536000);
            await this.bindStatusTap(e);
        },

        bindStatusTap: async function (e) {
            if (!AdminBiz.isAdmin(this)) {
                return;
            }
            let status = pageHelper.dataset(e, 'status');
            let idx = Number(pageHelper.dataset(e, 'idx'));
            let dataList = this.dataList;
            let id = dataList.list[idx].id;
            let params = {
                id,
                userStatus: status,
                reason: this.formReason
            };
            let cb = async () => {
                try {
                    await api.updateUserStatus(params).then((res) => {
                        let sortIndex = this.zpSelectComponent('#cmpt-comm-list').getSortIndex();
                        if (sortIndex != -1 && sortIndex != 5 && !this.search) {
                            // 全部或者检索的结果
                            dataList.list.splice(idx, 1);
                            dataList.total--;
                            this.setData({
                                dataList: this.dataList
                            });
                        } else {
                            let data1Name = 'dataList.list[' + idx + '].approvalReason';
                            let data2Name = 'dataList.list[' + idx + '].userStatus';
                            this.setData({
                                [data1Name]: this.formReason,
                                [data2Name]: status
                            });
                        }
                        this.setData({
                            checkModalShow: false,
                            formReason: '',
                            curIdx: -1
                        });
                        pageHelper.showSuccToast('操作成功');
                    });
                } catch (e) {
                    console.log('CatchClause', e);
                    console.log('CatchClause', e);
                    console.log(e);
                }
            };
            if (status == 2) {
                pageHelper.showConfirm('该用户审核不通过，用户修改资料后可重新提交审核', cb);
            } else {
                pageHelper.showConfirm('确认执行此操作?', cb);
            }
        },

        getSearchMenuFun: async function () {
            let sortItems1 = [
                {
                    label: '注册时间',
                    type: '',
                    value: ''
                },
                {
                    label: '注册时间从早到晚',
                    type: 'sort',
                    value: 'createdTime|asc'
                },
                {
                    label: '注册时间从晚到早',
                    type: 'sort',
                    value: 'createdTime|desc'
                }
            ];
            let sortMenus = [
                {
                    label: '全部',
                    type: '',
                    value: ''
                },
                {
                    label: '正常',
                    type: 'status',
                    value: 1
                },
                {
                    label: '禁用',
                    type: 'status',
                    value: 3
                }
            ];
            if (projectSetting.USER_REG_CHECK) {
                sortMenus = sortMenus.concat([
                    {
                        label: '待审核',
                        type: 'status',
                        value: 0
                    },
                    {
                        label: '审核未过',
                        type: 'status',
                        value: 2
                    }
                ]);
            }
            this.setData({
                search: '',
                sortItems: [sortItems1],
                sortMenus,
                isLoad: true
            });
        }
    }
};
</script>
<style>
@import './admin_user_list.css';
</style>
